import { useState,useCallback } from 'react';
import ChildCom1 from "./ChildCom1"
import ChildCom2 from "./ChildCom2"

import styles from "./css.css"

function CallBackTest() {
  const [counter, setCounter] = useState(0);
  const [counter1, setCounter1] = useState(0);
  const [counter2, setCounter2] = useState(0);
  console.log("CallBackTest渲染了")
  function test() {
    console.log("test");
  }  
  // 每次重新渲染的时候，就会生成一个全新的 test 函数
  // 使用了 useCallback 之后，我们针对 test 函数做了一个缓存  
  const newTest = useCallback(function test(){
    console.log("test触发了")
  },[])
  return (
    <div className={styles.container}>
    <h2>CallBackTest</h2>
      <div className={styles.btnContainer}>
        <div>{counter}</div>
        <button onClick={() => setCounter(counter + 1)}>+1</button>
      </div>


      <div className={styles.childComContainer}>
        <ChildCom1 counter={counter1} setCounter={setCounter1} test={newTest}/>
        <ChildCom2 counter={counter2} setCounter={setCounter2}  test={newTest}/>
      </div>

    </div>
  );
}

export default CallBackTest;